<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="copyright" content="www.apicloud.com" />
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>推荐</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<style>
	html {height: 100%;}
	body {height: 100%;background: #f0f0f0;}
	.login_box {
		height: 100%;
		width: 100%;
		display: table;
	}
	.login {
		width: 100%;
		height: 100%;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	.login_body {
		width: 90%;
		margin: 0 auto;
		padding: 1rem;
		background-color: #fff;
		border-radius: 0.5rem;
		-moz-box-shadow:0px 0.3rem 0.4rem rgba(0,0,0,0.1);
		-webkit-box-shadow:0px 0.3rem 0.4rem rgba(0,0,0,0.1);
		box-shadow:0px 0.3rem 0.4rem rgba(0,0,0,0.1);
		margin-bottom: 1.5rem;
	}
	.input {
		margin-bottom: 1rem;
		position: relative;
	}
	.input .input_img {
		position: absolute;
		width: 2rem;
		height: 2rem;
		top: 0;
		left: 0;
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
	}
	.input_img img {
		width: 0.8rem;
	}
	.login_but {
		background-color: #2997e4;
		font-size: 0.8rem;
		color: #fff;
		padding: 0.5rem 0;
		text-align: center;
		border-radius: 4px;
	}


	.login_footer {
		width: 80%;
		margin: 0 auto;
	}
	.login_footer h5 {
		color: #999;
		font-size: 0.7rem;
		margin-bottom: 2rem;
	}
  .input_txt {
    font-size: 0.8rem;
    width: 5rem;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    position: absolute;
    right: 0;
    top: 0;
    color: #2997e4;
  }

	.input input {height: 2rem;border-radius: 0.2rem;box-sizing: border-box;padding-right: 0.5rem;padding-left: 2rem;font-size: 0.8rem;background-color: #f5f5f5;color: #8E8C8C;width: 100%;}
	.input input::-webkit-input-placeholder {color: #ccc;}
	.input input {outline: none;}

  .yzm input {
    padding-right: 5rem;
  }
</style>
</head>
<body>

	<div class="login_box" id="app" v-cloak>
		<div class="login">
			<div class="login_body">
				<div class="input">
					<div class="input_img">
						<img src="../../image/zhanghao@3x.png" alt="">
					</div>

					<input type="text" placeholder="请输入手机号码" v-model="account">
				</div>
				<div class="input yzm">
					<div class="input_img">
						<img src="../../image/yanzhengma@3x.png" alt="">
					</div>
					<div class="input_txt" v-if="getCodeTime == 60" @click="getCode()">获取验证码</div>
          <div class="input_txt" style="color: #999" v-else>{{getCodeTime}}s后重试</div>

					<input type="text" placeholder="请输入验证码" v-model="code">
				</div>

				<div class="login_but" @click="Login()">
			    登录
			  </div>
			</div>
			<div class="login_footer">
				<h5 tapmode="presshover" onclick="Openindex()">随便看看</h5>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
apiready = function() {
	var URL = 'http://kexiecs.unohacha.com/kexieScore';

	var app = new Vue({
		el: '#app',
		data: {
			account: [],
			password: [],
			code: [],
			getCodeTime: 60
		},
		created: function() {
			var $_this = this;

		},
		methods: {
			getCode: function () {
				var $_this = this;
				if($_this.account == '' || !/^[1][3,4,5,7,8][0-9]{9}$/.test($_this.account)) {
						 api.toast({ msg: '请输入正确的手机号码',duration: 2000,location:'middle' });
					return
				}
				api.ajax({
				 	url: URL + '/user/requestPIN',
			    method: 'post',
			    headers: {
			        'Content-Type': 'application/json'
			    },
			    data: {
			        body: {
	 						 mobile: $_this.account,
	 						 pinflag: 2 // 登录
			        }
			    }
			}, function(ret, err) {
			    if (ret) {
			        // api.alert({ msg: JSON.stringify(ret) });
							var timer = setInterval(function () {
								$_this.getCodeTime = $_this.getCodeTime - 1
								if ($_this.getCodeTime <= 0) {
									$_this.getCodeTime = 60
									clearInterval(timer)
								}
							}, 1000)
							api.alert({ msg: ret.message})
			    } else {
			        api.alert({ msg: JSON.stringify(err) });
			    }
			});
			},
				 Login: function() {
					 var $_this = this;
					 if($_this.account == '' || !/^[1][3,4,5,7,8][0-9]{9}$/.test($_this.account)) {
								 api.toast({ msg: '请输入正确的手机号码',duration: 2000,location:'middle' });
	 					return
	 				} else if($_this.code == '') {
		 						 api.toast({ msg: '请输入验证码',duration: 2000,location:'middle' });
						 return
					 }
					 api.ajax({
 					  url: URL + '/user/freelogin',
						method: 'post',
				    headers: {
				        'Content-Type': 'application/json'
				    },
						data: {
							body: {
								account: $_this.account,
								pin: $_this.code,
								cid: api.deviceId
							}
						},
 						timeout: 300,
 					}, function(ret, err) {
 					    if (ret) {
								// api.alert({ msg: JSON.stringify(ret) });

								if (ret.code == 0) {
									$_this.token = ret.data.token
									// setCookie('token', $_this.token)
									// setCookie('account', $_this.account)
									$api.setStorage('token', $_this.token)
									$api.setStorage('account', $_this.account)
									$_this.pin = ''
					 				api.ajax({
					 					url: window.Url.getUsers,
					 					method: 'GET',
					 					headers: {
					 						'baseParams':$_this.token
					 					},
					 					timeout: 300,
					 				}, function(ret, err) {
					 						if (ret) {
					 							$api.setStorage('data', ret.data)
												var data = {
                                userid: ret.data.userid,
                                username: ret.data.nickname,
                                portrait: ret.data.headImg || 'defaultImg'
                            }
												api.ajax({
													 url: window.Url.rongyun_token,
													 data: {
															 body: data
													 },
													 timeout: 300,
													 method: 'post', // 提交类型
													 cache: 'false', // 是否缓存
													 dataType: 'json', // 返回数据     json 或 text
													 headers: {
															 'Content-Type': 'application/json',
													 },
											 }, function(ret, err) {

													 $api.setStorage('rong-token', ret.token);
												 })

					 						} else {
					 								api.alert({ msg: JSON.stringify(err) });
					 						}
					 				})
									$_this.Openindex()
								} else {
									api.alert({ msg: ret.message });
								}
 					    } else {
 					        api.alert({ msg: JSON.stringify(err) });
 					    }
 					})
				},
				Openindex: 	function () {
 					 var $_this = this;
					 api.closeWin({
						 name: 'index'
					 });
					 api.execScript({
								 name: 'root',
							 frameName: 'index',
							 script: 'location.reload();'
					 });
						api.openWin({
							reload: true,
							name: 'index',
							pageParam: {
								name: 'index',
								table: 2,
								token: $_this.token,
							},
							url: '../../index.html',
							delay: 200,
							bounces: false
						});
					}
		}
	})
}
	function Openindex() {
		api.openWin({
			name: 'index',
			pageParam: {name: 'index'},
			url: '../../index.html',
			delay: 200,
			bounces: false
		});
	}

</script>
</html>
